<template>
	<view class="content">
		<navBar title="妙街代言" :change="scrollChange" ref="navHeader"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/endorsing_bg.png" mode="widthFix" />
		</view>
		<view class="act-rule" @click="goGuize">说明</view>
		<view class="container">
			<view class="judge-card">
				<image src="/static/bg/endorsing_section_bg.png" mode="widthFix" />
				<view class="card-content flex justify-between align-center">
					<view class="card-logo">
						<image src="/static/image/clapperboard.png" mode="widthFix" />
					</view>
					<view class="content-btn-wrap">
						<view class="content-btn" @click="download">下载代言素材</view>
						<view class="content-btn red-btn" @click="navTo('toEndorsing')">去代言</view>
					</view>
				</view>
			</view>
			<view class="judge-title flex align-center justify-center">
				<image src="/static/icon/endorsing.png" />
				<text>更多代言</text>
				<image src="/static/icon/endorsing.png" />
			</view>
			<view class="list flex justify-between" v-for="(item,index) in movielist" :key="index" @click="godouyin(item.url)">
				<view class="list-info flex">
					<image :src="item.icon" />
					<view class="info-content">
						<view class="info">
							<view class="name">{{item.nickName}}</view>
							<view class="tag" v-if="item.mjLevel == 1">导购</view>
							<view class="tag" v-if="item.mjLevel == 2">店长</view>
						</view>
						<view class="packet">
							<image src="/static/icon/icon_red_packet.png" />
							<view class="packet-text">获得代言红包5元</view>
						</view>
					</view>
				</view>
				<view class="list-more">
					<text class="padding-right-xs">查看代言</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<!-- 客服弹出框 -->
		<view class="weChat_popups" v-if="watchShow == 1">
			<view class="popups_bg" @click="watchShow = 0"></view>
			<view class="popups_body">
				<view class="popups_no" @click="watchShow = 0">
					<image src="/static/icon_close.png" mode=""></image>
				</view>
				<view class="popups_content">
					<view class="popups_title">代言规则</view>
					<view class="popups_phone">
						店长级别尊享特权——发发视频就能赚钱</br>
						1·下载代言素材，下载成功后在抖音发布，获得妙街给出的红包奖励</br>
						2·抖音发布成功后，点击去代言上传发布内容，客服审核后会发奖励到账</br>
						3·店长级别每天可以转发一次获得相应奖励</br>
						4·所有视频合法合规，由妙街运营部提供素材</br>
						最终解释权归妙街细品所有
						
					</view>
					<!-- <view class="popups_btn" @click="setCopyWatch(watgchNum)"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import navBar from "@/components/header-nav";
	export default {
		components: {
			uniLoadMore,
			navBar
		},
		data() {
			return {
				watchShow:0,
				headerHeight: 0,
				scrollChange: false,
				list: [1, 2, 3, 4],
				movielist: [],
			};
		},

		onShow() {
			this.getmovielist()
		},
		onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
		},
		onPageScroll(e) {
			if (e.scrollTop > this.headerHeight) {
				this.scrollChange = true
			} else {
				this.scrollChange = false
			}
		},
		methods: {
			goGuize(){
				this.watchShow = 1;
			},
			navTo(e) {
				let userInfos = uni.getStorageSync('userInfos') || '';
				let mjLevel = userInfos.mjLevel;
				if(mjLevel == 2){
					uni.navigateTo({
						url: e
					});
				}else{
					uni.showToast({
						icon: 'none',
						title:'请升级为店长级别！'
					})
				}
			},
			// 下载素材
			async download() {
				let params = {
					type: 6,
				}
				let data = await Api.apiCall('get', Api.index.bannerList, params);
				data = data.reverse();
				let url = data[0].pic;
				console.log(url)

				// uni.downloadFile({
				// 	url: url,
				// 	success: (res) => {
				// 		//console.log(res)
				// 		if (res.statusCode === 200) {
				// 			uni.saveFile({
				// 				tempFilePath: res.tempFilePath,
				// 				success: function(res) {
				// 					uni.openDocument({
				// 						filePath: res.savedFilePath,
				// 						success: (res) => //console.log('成功打开文档')
				// 					})
				// 				}
				// 			});
				// 		}
				// 	}
				// });
				uni.showLoading({
					title:'下载中...'
				})
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				});

			},
			// 视频列表
			async getmovielist() {
				let params = {
					// status: 1,
					type: 6
				};
				let data = await Api.apiCall('POST', 'member/share/list', params, false, "application/json");
				this.movielist = data.records;
			},
			// 跳转到抖音
			godouyin(url) {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						plus.runtime.openURL(url, function(res) {
							//console.log(res)
						})
						break;
					case 'ios':
						plus.runtime.launchApplication({
							action: 'https://v.douyin.com/JjvrKrH/'
						}, function(e) {
							//console.log(url + e.message);
						});

						break;
					default:
						//console.log('运行在开发者工具上')
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		min-height: 100vh;
		position: relative;

		.header-bg {
			width: 100%;
			font-size: 0;

			image {
				width: 100%;
			}
		}

		.container {
			background: linear-gradient(to bottom, #E574EA, #fff);
			padding: 0 20upx 90upx;

			.judge-card {
				position: relative;

				image {
					padding: 0 5upx;
					width: 100%;
				}

				.card-content {
					width: 100%;
					height: 100%;
					padding: 30upx 30upx 30upx 40upx;
					position: absolute;
					bottom: 0;

					.card-logo {
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					image {
						width: 220upx;
						height: 220upx;
					}

					.content-btn-wrap {
						width: 50%;
						height: 200upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;

						.content-btn {
							width: 260upx;
							height: 72upx;
							line-height: 72upx;
							text-align: center;
							font-size: 30upx;
							color: #fff;
							background: linear-gradient(to right, #FBC900, #F88400);
							border-radius: 36upx;
						}

						.red-btn {
							background: linear-gradient(to right, #FF7777, #FF1D1D);
						}
					}
				}
			}

			.judge-title {
				margin-top: 50upx;

				image {
					width: 38upx;
					height: 52upx;
				}

				text {
					padding: 0 20upx;
					font-size: 36upx;
					color: #711F91;
					font-weight: bold;
				}
			}

			.list {
				margin-top: 30upx;
				padding: 20upx;
				background: #fff;
				margin-bottom: 20upx;
				border-radius: 20upx;
				box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.06);

				.list-info {
					image {
						width: 120upx;
						height: 120upx;
					}

					.info-content {
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info {
							display: flex;
							align-items: center;

							.name {
								font-size: 36upx;
								font-weight: bold;
								color: #333;
							}

							.tag {
								margin-left: 10upx;
								font-size: 20upx;
								width: 120upx;
								height: 36upx;
								background: linear-gradient(135deg, rgba(255, 213, 121, 1) 0%, rgba(255, 158, 25, 1) 100%);
								border-radius: 0px 16upx 16upx 16upx;
								text-align: center;
								line-height: 36upx;
								color: #fff;
							}
						}

						.packet {
							display: flex;
							align-items: center;

							image {
								width: 44upx;
								height: 44upx;
							}

							.packet-text {
								margin-left: 10upx;
								padding: 8upx 10upx;
								background: linear-gradient(135deg, rgba(255, 119, 119, 1) 0%, rgba(255, 29, 29, 1) 100%);
								border-radius: 6upx;
								color: #FFE199;
								font-size: 24upx;
							}
						}
					}
				}

				.list-more {
					font-size: 20upx;
					color: #999;
				}
			}

		}

	}
	// 客服弹出框
	.weChat_popups {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	
		.popups_bg {
			z-index: 1000;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #000;
			opacity: 0.3;
		}
	
		.popups_body {
			z-index: 1001;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 600upx;
			height: 700upx;
			line-height: 50upx;
			border-radius: 30upx;
			background-color: #FFFFFF;
	
			.popups_no {
				position: absolute;
				right: 20upx;
				top: 20upx;
				width: 32upx;
				height: 32upx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				image {
					width: 32upx;
					height: 32upx;
				}
			}
	
			.popups_content {
				width: 100%;
				padding: 0 30upx;
				padding-top: 30upx;
				padding-bottom: 30upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.popups_title {
					margin-top: 30upx;
					font-size: 36upx;
					text-align: center;
				}
	
				.popups_phone {
					font-size: 30upx;
					// text-align: center;
					font-weight: 500;
				}
	
				.popups_btn {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					background-color: #AD1E22;
					font-size: 36upx;
					border-radius: 44upx;
					line-height: 88upx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>
